<template>
  <div>
    <comp-sousuo></comp-sousuo>
    <div class="rd-video">
      <video :src="`${array.video.url}`" controls="controls"></video>
    </div>
    <!-- 简介 评论-->
    <div class="rd-Introduction">
      <ul class="rd-list">
        <li @click="flagIcom" :class="stateFlagIcom == true ? 'active' : ''">
          简介
        </li>
        <li @click="flagIcom" :class="stateFlagIcom == false ? 'active' : ''">
          评论
        </li>
      </ul>
      <!-- 内容区 -->
      <div class="rd-content" v-show="stateFlagIcom">
         <p class="content-title">{{array.title}}</p>
      </div>
      <!-- 评论区 -->
      <div class="rd-comment" v-show="!stateFlagIcom">
        <comp-comment></comp-comment>
      </div>
    </div>
  </div>
</template>

<script>
import compSousuo from "../components/comp-sousuo.vue";
import compComment from "../components/comp-comment.vue";

export default {
  name: "rdVideo",
  data() {
    return {
      array: [], //渲染页面数据
      tempId: 0, //所有id
      tempArray: [],
      stateFlagIcom: true,
    };
  },
  components: {
    compSousuo,
    compComment,
  },
  methods: {
    // 查找唯一_id
    drawData() {
      this.tempId = Number(this.$route.query._id);
      this.tempArray = this.$store.state.homepageArray;
      for (let i = 0; i < this.tempArray.length; i++) {
        // this.tempId.push(this.tempArray[i])
        if (this.tempArray[i].id == this.tempId) {
          this.array = this.tempArray[i];
        }
      }
    },
    //  切换
    flagIcom() {
      this.stateFlagIcom = !this.stateFlagIcom;
    },
  },
  mounted() {
    this.drawData();
    // console.log(this.$route.query._id);
    console.log(this.$store.state.homepageArray);
  },
};
</script>

<style lang="scss" scoped>
.rd-video {
  video {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
}
//  <!-- 简介 评论-->
.rd-Introduction {
  .rd-list {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid rgb(228, 228, 228);

    li {
      padding: 10px 0;
      font-size: 18px;
      box-sizing: border-box;
      transition: all .5s ease-out;
      // font-weight: bold;
      // border-bottom: 2px solid rgb(255, 64, 64);
    }
    .active {
      // box-sizing: border-box;
      // font-weight: bold;
      transform: scale(1.1);
      border-bottom: 2px solid rgb(255, 64, 64);
    }
  }
}
// 内容区
.rd-content{
   width: 352px;
   margin: 0 auto;
   .content-title{
      padding: 10px 0;
      font-size: 20px;
      font-weight: 500;
      text-indent: 36px;
      line-height: 1.2;
   }
}
</style>